<!--新增计划-->
<template>
  <div class="main">
    <div class="info-container">
      <div class="info-container_body">
        <el-form ref="refFrom" label-position="top" class="demo" :rules="rules" v-loading="loading" :model="item">
          <ul>
            <li>
              <el-row
                ><el-col :span="12">
                  <b
                    style="border-left: solid 5px var(--el-color-primary);
    padding: 2px;"
                    >摘要</b
                  ></el-col
                >
                <el-col :span="12">
                  <!-- <el-button link type="primary" icon="el-icon-plus" @click="add()"
                    ><el-icon><Plus /></el-icon>添加</el-button
                  > -->

                  <!-- <el-button link type="danger" icon="el-icon-delete" @click="del(index)" v-if="index>0"
                    ><el-icon><Delete /></el-icon>删除</el-button
                  > -->
                </el-col></el-row
              >
              <div style="padding:10px;background:#F6F7FB">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="计划编号" prop="planNo">
                      <el-input v-model="item.planNo" placeholder="计划编号"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="计划名称" prop="planName">
                      <el-input v-model="item.planName" placeholder="计划名称"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="计划开始时间" prop="startTime">
                      <el-date-picker
                        v-model="item.startTime"
                        type="datetime"
                        placeholder="计划开始时间"
                        format="YYYY-MM-DD hh:mm:ss"
                        value-format="YYYY-MM-DD hh:mm:ss"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="2"></el-col>
                  <el-col :span="11">
                    <el-form-item label="计划完成时间" prop="endTime">
                      <el-date-picker
                        v-model="item.endTime"
                        type="datetime"
                        placeholder="计划完成时间"
                        format="YYYY-MM-DD hh:mm:ss"
                        value-format="YYYY-MM-DD hh:mm:ss"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-row>
                  <el-col :span="24">
                    <el-form-item label="下单时间">
                      <el-date-picker
                        v-model="item.orderTime"
                        type="datetime"
                        placeholder="下单时间"
                        format="YYYY-MM-DD hh:mm:ss"
                        value-format="YYYY-MM-DD hh:mm:ss"
                      />
                    </el-form-item>
                  </el-col>
                </el-row> -->
              </div>

              <el-row style="line-height:50px;"
                ><el-col :span="12">
                  <b
                    style="border-left: solid 5px var(--el-color-primary);
    padding: 2px;"
                    >详情</b
                  ></el-col
                >
                <el-col :span="12">
                  <el-button link type="primary" icon="el-icon-plus" @click="addInfo()" style="float:right;padding:15px"
                    ><el-icon><Plus /></el-icon>添加</el-button
                  >
                </el-col>
              </el-row>
              <div style="padding:10px;background:#F6F7FB" v-for="detail in item.detailList">
                <el-row>
                  <el-col :span="12"></el-col>
                  <el-col :span="12">
                    <el-button link type="danger" icon="el-icon-delete" @click="delInfo(detail.id)" style="float:right"
                      ><el-icon><Delete /></el-icon>删除</el-button
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="设备适用场所">
                      <el-select v-model="detail.placeType" placeholder="设备适用场所">
                        <el-option v-for="place in placeType" :key="place.value" :label="place.label" :value="place.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2"></el-col>
                  <el-col :span="11">
                    <el-form-item label="设备类型">
                      <el-select v-model="detail.deviceType" placeholder="设备类型">
                        <el-option
                          v-for="device_type in dict.device_type"
                          :key="device_type.value"
                          :label="device_type.label"
                          :value="device_type.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="计划完成数量">
                      <el-input-number :min="0" v-model="detail.planQuantity" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="2"></el-col>
                  <el-col :span="11">
                    <el-form-item label="标准工时(小时)">
                      <el-input-number :min="0" v-model="detail.standardWorkingHours" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注">
                      <el-input type="textarea" v-model="detail.remarks" placeholder="备注"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </li>
          </ul>
        </el-form>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { add, update } from '@/api/device/plan/index';
import common from '@/utils/common.ts';

export default {
  props: {
    data: {}
  },
  computed: {},
  data() {
    return {
      loading: false,
      rules: {
        planNo: [{ required: true, message: '', trigger: 'blur' }],
        planName: [{ required: true, message: '', trigger: 'blur' }],
        startTime: [{ required: true, message: '', trigger: 'blur' }],
        endTime: [{ required: true, message: '', trigger: 'blur' }]
      },
      index: 0,
      proxy: null,
      dict: {},
      placeType: [
        { label: '站房', value: '1' },
        { label: '酒店', value: '2' }
      ],
      item: {
        detailList: []
      }
    };
  },

  mounted() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    this.proxy = proxy;
    this.dict = toRefs<any>(this.proxy?.useDict('device_type'));

    this.init();
  },
  methods: {
    init(data) {
      if (data == null) this.item = this.data;
      else this.item = data;
    },

    handleCancel() {
      this.$emit('hideRight');
    },

    handleSave() {
      this.$refs['refFrom'].validate((valid) => {
        if (valid) {
          // 校验通过、调充值接口的逻辑操作

          let data = this.item;
          if (data.planId == null) {
            //新增
            this.add();
          } else {
            //编辑
            this.update();
          }
        }
      });
    },

    /**添加详情 */
    addInfo() {
      this.index++;
      this.item.detailList.push({
        id: this.index,
        deviceType: '1',
        planQuantity: 0,
        standardWorkingHours: 0,
        remarks: '',
        finishQuantity: 0,
        placeType: '1'
      });
    },

    /**
     * 移除详情
     */
    delInfo(id) {
      let detailList = this.item.detailList;
      for (let i = 0; i < detailList.length; i++) {
        if (detailList[i].id == id) {
          detailList.splice(i, 1);
          break;
        }
      }
    },

    add() {
      this.loading = true;
      add(this.item)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$emit('hideRight');
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    update() {
      this.loading = true;
      update(this.item)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$emit('hideRight');
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  height: 100%;

  .contentFrm {
    padding: 10px;
    background: #f6f7fb;
  }

  .el-input-number__decrease,
  .el-input-number__increase {
    display: none;
  }

  .el-input-number {
    width: 100%;
  }

  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
</style>